<template>
    <div class="books" ref="wrapper2">
        <ul>
            <li v-for="obj of books" :key="obj.id">
                <div class="left">
                    <img :src="obj.imgUrl" alt="">
                </div>
                <div class="right">
                    <h3>{{obj.bookName}}</h3>
                    <span>{{obj.author}}</span>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
    name:"Shelve",
    components:{
        
    },
    data(){
        return{
             books:[
    {
      "id": "1001",
      "imgUrl": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3757351635,2212808852&fm=26&gp=0.jpg",
      "bookName": "漫游山海间",
      "author": "正泰刊物",
      "price": "¥29.9"
    },
    {
      "id": "1002",
      "imgUrl": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2285914588,4141950901&fm=26&gp=0.jpg",
      "bookName": "庄子",
      "author": "庄子",
      "price": "¥39.9"
    },
    {
      "id": "1003",
      "imgUrl": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2636594013,3355644410&fm=26&gp=0.jpg",
      "bookName": "漫游山海间",
      "author": "正泰刊物",
      "price": "¥29.9"
    },
    {
      "id": "1004",
      "imgUrl": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=272181226,3386047110&fm=26&gp=0.jpg",
      "bookName": "漫游山海间",
      "author": "正泰刊物",
      "price": "¥29.9"
    },
    {
      "id": "1005",
      "imgUrl": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3695618904,2659352471&fm=26&gp=0.jpg",
      "bookName": "漫游山海间",
      "author": "正泰刊物",
      "price": "¥29.9"
    },
    {
      "id": "1006",
      "imgUrl": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=269273940,1043269981&fm=26&gp=0.jpg",
      "bookName": "漫游山海间",
      "author": "正泰刊物",
      "price": "¥29.9"
    },
    {
      "id": "1001",
      "imgUrl": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3757351635,2212808852&fm=26&gp=0.jpg",
      "bookName": "漫游山海间",
      "author": "正泰刊物",
      "price": "¥29.9"
    },
    {
      "id": "1002",
      "imgUrl": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2285914588,4141950901&fm=26&gp=0.jpg",
      "bookName": "庄子",
      "author": "庄子",
      "price": "¥39.9"
    },
    {
      "id": "1003",
      "imgUrl": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2636594013,3355644410&fm=26&gp=0.jpg",
      "bookName": "漫游山海间",
      "author": "正泰刊物",
      "price": "¥29.9"
    },
    {
      "id": "1004",
      "imgUrl": "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=272181226,3386047110&fm=26&gp=0.jpg",
      "bookName": "漫游山海间",
      "author": "正泰刊物",
      "price": "¥29.9"
    },
    {
      "id": "1005",
      "imgUrl": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3695618904,2659352471&fm=26&gp=0.jpg",
      "bookName": "漫游山海间",
      "author": "正泰刊物",
      "price": "¥29.9"
    },
    {
      "id": "1006",
      "imgUrl": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=269273940,1043269981&fm=26&gp=0.jpg",
      "bookName": "漫游山海间",
      "author": "正泰刊物",
      "price": "¥29.9"
    }
  ]
        }
    },
    mounted() {
        this.scroll = new BScroll(this.$refs.wrapper2);
    },
}
</script>
<style lang="stylus" scoped>
    @import '~styles/mixins.styl';
    .books
        overflow :hidden
        height:100%
        li
            1.5rem
            overflow :hidden
            .left
                width:1.3rem
                text-align :center
                line-height :1.5rem
                vertical-align :middle
                height 1.5rem
                float:left
                img 
                    height:80%
            .right
                width :4rem
                display :flex
                height:1.5rem
                line-height :21px
                flex-direction:column
                justify-content :center
                h3
                    font-weight :bold
                    font-size:18px
                span 
                    color:gray
                    ellipsis()
                   
                    
                
</style>